<!--
  Generated template for the CustomerAppointmentPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>新建单</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <div class="w12" *ngIf="dzbor">

    <div class="w12 tc pt10 pb10" (click)="push('CustomerAddressListPage')" *ngIf="theadd.length==0">
      <span class="font_color plr15 font_size_large lh35"
            style="border:solid 1px #2664be; border-radius:20px;">+新增地址</span>
    </div>
    <div class="w12 customer" (click)="push('CustomerAddressListPage')" *ngIf="theadd.length!=0">
      <div class="w12 customer_info" *ngFor="let ad of theadd">
        <h3 class="fl mtb0 plb0">{{ad.KHXM}}</h3>
        <span class="fl mt5 ml15">{{ad.LXDH}}</span>
        <div class="w12 mt5 font_black_999">
          <i class="fa fa-map-marker mr5" style="color:#347eff;"></i>
          {{ad.DZ[0]?.VALUE}} {{ad.DZ[1]?.VALUE}} {{ad.DZ[2]?.VALUE}} {{ad.DZ[3]?.VALUE}} {{ad.ADDRESS }} {{ad.XXDZ}}
        </div>
      </div>
      <div class="w12 line01"></div>
    </div>
  </div>
  <div class="w12 bgcolor_white mt15">
    <div class="jl_form">
      <div class="jl_form_item" (click)="chooseServiceType()">
        <span class="w04">服务类型</span>
        <span class="w08 tr font_gray">{{serviceType.value}}</span>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
  <div class="w12 bgcolor_white mt15">
    <div class="jl_form">
      <div class="jl_form_item" (click)="tanchu()">
        <span class="w04">预约时间</span>
        <span class="w08 tr font_gray">{{ct.ztime.thedate|week}} {{ct.dtime?.time}}</span>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
  <div class="w12 bgcolor_white mt15">
    <div class="jl_form">
      <div class="jl_form_item bor_bottom" (click)="chooseCategory()">
        <span class="w04">品类</span>
        <span class="w08 tr font_gray">{{category.VALUE}}</span>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
    <div class="jl_form">
      <div class="jl_form_item" (click)="chooseBrand()">
        <span class="w04">品牌</span>
        <span class="w08 tr font_gray">{{brand.VALUE}}</span>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
  <div class="w12 bgcolor_white mt15">
    <div class="jl_form" *ngIf="serviceType&&serviceType.key=='3'">
      <div class="jl_form_item" (click)="chooseTrouble()">
        <span class="w04">故障</span>
        <span class="w08 tr font_gray">{{trouble.VALUE}}</span>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
  <div class="w12 bgcolor_white mt15" *ngIf="serviceType&&serviceType.key=='3'">
    <div class="jl_input">
      <div class="jl_input_item pr15">
        <textarea class="w12" placeholder="故障描述，尽可能详细描述您遇到的问题。" rows="5" [(ngModel)]="gzms"></textarea>
      </div>
    </div>
  </div>
</ion-content>
<ion-footer>
  <div class="w12 bottom">
    <span class="w12 font_size_large lh50 tc sure" style="background-color: #2664be; color: #FFFFFF"
          (click)="checkData('SuccessPage')">提 交</span>
  </div>
</ion-footer>

<div class="pt5 tccbg" *ngIf="!tanbor" (click)="tanbor=!tanbor">
  <div class="tccbox animated zoomInUp" style="bottom:115px;" (click)="$event.stopPropagation()">
    <p class="w12 tc lh40 font_black_666 border_bottom font_size_large">选择预约时间</p>
    <div class="w04 lh40 font_size_standard bgcolor_gray_444 tccontent" style="height:280px; ">
      <div class="w12 datebox" *ngIf="timelist">
        <span class="w12 pl10 pt5 pb5" *ngFor="let d of timelist" [class.hover]="d.bor"
              (click)="choosetime(d)">{{d.thedate|week}}</span>
      </div>
    </div>
    <div class="w08 plr10 mt15 lh30 tc font_size_large">
      <div class="timebox" *ngIf="amap">
              <span class="w12 pt10 pb10 mb10 bgcolor_gray_444"
                    *ngFor="let a of amap" [class.hover]="a.bor" (click)="chooseap(a)">{{a.time}}</span>
      </div>
    </div>
  </div>
</div>
